<template>
    <el-dialog :title="dialogStatus | titleFilter" :close-on-click-modal="false" width="800px" :visible.sync="visible">
        <el-form ref="temp" :model="temp" :rules="rule" label-width="120px" @keyup.enter.native="dataFormSubmit()">

            <el-row :gutter="20">
                <el-col :span="24" :offset="0">

                    <!-- <el-form-item label="租售类型" prop="house_type">
                        <el-select v-model="temp.house_type" placeholder="请选择" @change="park_change">
                            <el-option v-for="item in houseType_" :key="item.value" :label="item.lable" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item> -->

                    <el-form-item label="红冲原因" style="width:100%" prop="freeReason">
                        <el-input v-model="temp.remarks" type="textarea" :autosize="{ minRows: 3, maxRows: 4}" disabled placeholder="请输入" />
                    </el-form-item>

                </el-col>
            </el-row>

            <!-- <el-form-item label="备注" prop="remark">
                <el-input v-model="temp.remark" placeholder="备注" />
            </el-form-item> -->

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">
                取消
            </el-button>
            <el-button type="primary" @click="dataFormSubmit">
                确认
            </el-button>
        </span>
    </el-dialog>
</template>
<script>
import { createHouse, updateHouse } from '@/api/assets'// 请求数据
import { updateRemark } from '@/api/charge'// 请求数据  收费标准
import { houseState, houseType, houseFunction } from '@/utils/enum' //字典

// import { treeDataTranslate } from '@/utils'

export default {
    filters: {
        // 过滤弹框的标题
        titleFilter (type) {
            const textMap = {
                create: '收款备注',
                update: '修改'
            }
            return textMap[type]
        },
        //新增属性名
        // 过滤弹框的标题
        // lableFilter (type) {
        //     const textMap = ['楼栋', '单元', '楼层']
        //     return textMap[type]
        // }
    },
    data () {
        return {
            visible: false,
            dialogStatus: '', // 弹框新增或者修改
            park_options: [], // 园区list
            temp: { // 表单数据
                id: '',
                remarks: ''
            },
            rule: {
                remarks: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ]
            },
            upData: null
        }
    },
    computed: {
        // houseState_ () {
        //     let arr = []
        //     for (let key in houseState) {
        //         arr.push({
        //             lable: houseState[key],
        //             value: key
        //         })
        //     }
        //     return arr
        // }
    },
    created () {
    },
    methods: {
        // 初始化
        init (status, param) {
            //   console.log(param)
            this.dialogStatus = status // 标题
            this.visible = true // 显示
            this[status](param) // 新增或者修改
            this.$nextTick(() => { // 重置表单
                this.$refs['temp'].clearValidate()
            })
            // this.get_park()
        },
        create (param) {
            this.resetTemp(param) // 清空表单
        },
        async update (param) {
            // console.log(param)
            this.upData = param
            let data = Object.assign({}, param)//从上一页带过来当前的数据
            //   const { data, code } = await getParkDetails({}, param.id) // 从后台获取当前的的数据
            // 成功
            this.temp.id = data.id  //房屋id
            this.temp.remarks = data.remarks // 房屋 名称

        },
        // 获取园区tree
        // async get_park () {
        //     const res = await getHouseTree().catch(e => { })
        //     // 失败
        //     if (!res) { this.listLoading = false; return }
        //     // 成功
        //     const { data, code, message } = res
        //     let options = treeDataTranslate(data, 'id', 'parentId')
        //     this.park_options = this.set_tree(options)

        //     let arr = []
        //     this.park_options.forEach((item, index) => {
        //         if (item.parkId == this.upData.parkId) arr.push(item.id);
        //     })
        //     arr.push(this.upData.buildingId)
        //     if (this.upData.unitId) arr.push(this.upData.unitId);
        //     arr.push(this.upData.floorId)
        //     this.temp.park_id = arr
        // },
        // set_tree (data) {
        //     function treeArr (arr) {
        //         arr.forEach((item, index) => {
        //             if (item.type == 3) delete item.list
        //             if (item.list && item.list.length > 0) {
        //                 treeArr(item.list)
        //             }
        //         })
        //         return arr
        //     }
        //     let res = treeArr(data)
        //     return res
        // },
        // 新增数据清空表单数据
        resetTemp (param) {
            this.temp = {
                id: '',
                remarks: ''
            }
        },
        // 表单提交
        dataFormSubmit () {
            this.$refs['temp'].validate(async (valid) => {
                if (!valid) return

                // console.log("park:", park, building, unit, floor)
                const params = {
                    'id': this.temp.id ? this.temp.id : '',
                    'remarks': this.temp.remarks, //备注
                }

                const textMap = {
                    create: updateRemark, // 新增
                    update: updateRemark // 修改
                }

                // 提交表单
                const { code, message } = await textMap[this.dialogStatus](params)

                // 成功
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        this.visible = false
                        this.$emit('getList')
                    }
                })
            })
        },

        // ===>>>>>>>>>

        // 选择园区
        park_change (e) {
            console.log(e)
        }

    }
}
</script>

<style lang="scss">
.mod-menu {
    .menu-list__input,
    .icon-list__input {
        > .el-input__inner {
            cursor: pointer;
        }
    }
    &__icon-popover {
        width: 458px;
        overflow: hidden;
    }
    &__icon-inner {
        width: 478px;
        max-height: 258px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    &__icon-list {
        width: 458px;
        padding: 0;
        margin: -8px 0 0 -8px;
        > .el-button {
            padding: 8px;
            margin: 8px 0 0 8px;
            > span {
                display: inline-block;
                vertical-align: middle;
                width: 18px;
                height: 18px;
                font-size: 18px;
            }
        }
    }
    .icon-list__tips {
        font-size: 18px;
        text-align: center;
        color: #e6a23c;
        cursor: pointer;
    }
}
</style>
